<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {
  createShovel,
  deleteShovel,
  listShovel,
  listShovelStatus,
  restartShovel
} from "../../../http/rabbitmq/shovel.js";
import {rabbitmqStore} from "../../../stores/counter.js";
import {listVhost} from "../../../http/rabbitmq/vhost.js";

const vhostList = ref([])

const shovelSrcType = ref("queue")
const shovelDestType = ref("exchange")

const shovelTableData = ref([])

const shovelForm = ref({
  "component": "shovel",
  "vhost": "",
  "name": "",
  "value": {
    "src-protocol": "amqp091",
    "src-uri": "amqp://",
    "src-queue": "",
    "src-delete-after": "never",

    "dest-protocol": "amqp091",
    "dest-uri": "amqp://",
    "dest-exchange": "",
    "dest-exchange-key": "",
    "dest-add-forward-headers": false,
    "ack-mode": "on-confirm"
  }
})

const showShovelForm = ref(false)

function showShovelCreate() {
  showShovelForm.value = true
}

function handleShovelSave() {
  handleShovelCreate()
}

function handleShovelCreate() {
  createShovel(shovelForm.value).then(response => {
    handleShovelList()
    showShovelForm.value = false
  })
  shovelForm.value = {
    "component": "shovel",
    "vhost": "/",
    "name": "",
    "value": {
      "src-protocol": "amqp091",
      "src-uri": "amqp://",
      "src-queue": "",
      "src-delete-after": "never",

      "dest-protocol": "amqp091",
      "dest-uri": "amqp://",
      "dest-exchange": "",
      "dest-exchange-key": "",
      "dest-add-forward-headers": false,
      "ack-mode": "on-confirm"
    }
  }
}

function handleShovelDelete(vhost, name) {
  deleteShovel(vhost, name).then(response => {
    handleShovelList()
    showShovelForm.value = false
  })
}

function handleShovelRestart(vhost, name) {
  restartShovel(vhost, name).then(response => {
    handleShovelList()
  })
}

function handleShovelList() {
  listShovelStatus().then(response => {
    shovelTableData.value = response
  })
}

function handleVhostList() {
  listVhost().then(response => {
    vhostList.value = response
  })
}

onMounted(() => {
  handleShovelList()
  handleVhostList()
  rabbitmqStore().setTimer(handleShovelList)
})

onUnmounted(() => {
  clearInterval(rabbitmqStore().timer)
  rabbitmqStore().deleteTimer()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleShovelList">Search</el-button>
          <el-button type="primary" @click="showShovelCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="shovelTableData" border style="width: 100%;">
      <el-table-column prop="name" label="name" min-width="100">
        <template #default="scope">
          <router-link :to="{path:'/shovel-details', query: { name: scope.row.name, vhost: scope.row.vhost }}">
            {{ scope.row.name }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="node" label="node" min-width="80" width="80"/>
      <el-table-column prop="vhost" label="vhost" min-width="80" width="80"/>
      <el-table-column prop="state" label="state" min-width="80" width="80"/>

      <el-table-column label="Source">
        <el-table-column prop="src_protocol" label="protocol" width="90"/>
        <el-table-column prop="src_uri" label="uri" width="80"/>
        <el-table-column label="Endpoint" width="80">
          <el-table-column label="type" width="80">
            <template #default="scope">
              <span v-if="scope.row['src_queue']">Queue</span>
              <span v-if="scope.row['src_exchange']">Exchange</span>
            </template>
          </el-table-column>
          <el-table-column label="name" width="80">
            <template #default="scope">
              <span v-if="scope.row['src_queue']">{{ scope.row['src_queue'] }}</span>
              <span v-if="scope.row['src_exchange']">{{ scope.row['src_exchange'] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="key" width="80">
            <template #default="scope">
              <span v-if="scope.row['src_exchange']">{{ scope.row['src_exchange_key'] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>

      <el-table-column label="Destination">
        <el-table-column prop="dest_protocol" label="protocol" width="90"/>
        <el-table-column prop="dest_uri" label="uri" width="80"/>
        <el-table-column label="Endpoint" width="80">
          <el-table-column label="type" width="100">
            <template #default="scope">
              <span v-if="scope.row['dest_queue']">Queue</span>
              <span v-if="scope.row['dest_exchange']">Exchange</span>
            </template>
          </el-table-column>
          <el-table-column label="name" width="100">
            <template #default="scope">
              <span v-if="scope.row['dest_queue']">{{ scope.row['dest_queue'] }}</span>
              <span v-if="scope.row['dest_exchange']">{{ scope.row['dest_exchange'] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="key" width="80">
            <template #default="scope">
              <span v-if="scope.row['dest_exchange']">{{ scope.row['dest_exchange_key'] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="timestamp" label="timestamp" width="120"/>

      <el-table-column label="operations" width="110" fixed="right">
        <template #default="scope">
          <el-button type="danger" @click="handleShovelRestart(scope.row.vhost, scope.row.name)">
            Restart
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="shovel manage" v-model="showShovelForm" fullscreen :close-on-click-modal="false" label-width="160px">
    <el-row :gutter="5">
      <el-col :span="24">
        <el-form ref="form" :model="shovelForm" label-width="60px">
          <el-form-item label="Vhost">
            <el-select v-model="shovelForm.vhost">
              <el-option
                  v-for="item in vhostList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="shovelForm.name"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="shovelForm" label-width="180px">
          <el-form-item label="source-protocol">
            <el-select v-model="shovelForm['value']['src-protocol']">
              <el-option label="AMQP 0.9.1" value="amqp091"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="source-uri">
            <el-input v-model="shovelForm['value']['src-uri']"></el-input>
          </el-form-item>
          <el-form-item label="source-type">
            <el-select v-model="shovelSrcType">
              <el-option label="Queue" value="queue"></el-option>
              <el-option label="Exchange" value="exchange"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="shovelSrcType === 'queue'" label="source-queue">
            <el-input v-model="shovelForm['value']['src-queue']"></el-input>
          </el-form-item>
          <el-form-item v-if="shovelSrcType === 'exchange'"  label="source-exchange">
            <el-input v-model="shovelForm['value']['src-exchange']"></el-input>
          </el-form-item>
          <el-form-item v-if="shovelSrcType === 'exchange'"  label="source-exchange-key">
            <el-input v-model="shovelForm['value']['src-exchange-key']"></el-input>
          </el-form-item>
          <el-form-item label="source-prefetch-count">
            <el-input type="number" v-model="shovelForm['value']['src-prefetch-count']"></el-input>
          </el-form-item>
          <el-form-item label="source-delete-after">
            <el-select v-model="shovelForm['value']['src-delete-after']">
              <el-option label="Never" value="never"></el-option>
              <el-option label="Queue Length" value="queue-length"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="shovelForm" label-width="210px">
          <el-form-item label="dest-protocol">
            <el-select v-model="shovelForm['value']['src-protocol']">
              <el-option label="AMQP 0.9.1" value="amqp091"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="dest-uri">
            <el-input v-model="shovelForm['value']['dest-uri']">
            </el-input>
          </el-form-item>
          <el-form-item label="dest-type">
            <el-select v-model="shovelDestType">
              <el-option label="Queue" value="queue"></el-option>
              <el-option label="Exchange" value="exchange"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="shovelDestType === 'queue'" label="dest-queue">
            <el-input v-model="shovelForm['value']['dest-queue']"></el-input>
          </el-form-item>
          <el-form-item v-if="shovelDestType === 'exchange'"  label="dest-exchange">
            <el-input v-model="shovelForm['value']['dest-exchange']"></el-input>
          </el-form-item>
          <el-form-item v-if="shovelDestType === 'exchange'"  label="dest-exchange-key">
            <el-input v-model="shovelForm['value']['dest-exchange-key']"></el-input>
          </el-form-item>
          <el-form-item label="dest-add-forward-headers">
            <el-select v-model="shovelForm['value']['dest-add-forward-headers']">
              <el-option label="No" :value="false"></el-option>
              <el-option label="Yes" :value="true"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="shovelForm" label-width="180px">
          <el-form-item label="reconnect-delay">
            <el-input type="number" v-model="shovelForm['value']['reconnect-delay']"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="shovelForm" label-width="180px">
          <el-form-item label="ack-mode">
            <el-select v-model="shovelForm['value']['ack-mode']">
              <el-option label="on-confirm" value="on-confirm"></el-option>
              <el-option label="on-publish" value="on-publish"></el-option>
              <el-option label="no-ack" value="no-ack"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-form ref="form" :model="shovelForm" label-width="180px">
          <el-form-item>
            <el-button type="primary" @click="handleShovelSave">Save</el-button>
            <el-button @click="showShovelForm = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<style scoped>

</style>